<template>
  <div class="detail-list">
    <h3>{{ ajaxData.data.listTitle }}</h3>
    <ul>
      <li v-for="(item,key) in ajaxData.data.tickets" :key="key">
        <p @click="changeCollapse(key)"><span>{{ item.ticketName }}</span><span class="price">&yen;<b>{{ item.startPrice }}</b><span>起</span></span><i class="icon-arrow-down"></i></p>
        <transition mode="in-out">
          <div class="collapse" v-show="key === index">
            <ul>
              <li>{{ item.deadLineTime }}</li>
              <li>{{ item.lossTag }}|{{ item.saleModeName }}</li>
              <li>预定须知 ></li>
            </ul>
            <ul>
              <li ><i>&yen;</i><b>{{ item.startPrice }}</b>起</li>
              <li  v-if="item.priceMarked" style="color:#a1a1a1;"><strike>{{ item.priceMarked }}</strike></li>
              <li >
                <van-button type="danger" round size="small">立即预定</van-button>
              </li>
            </ul>
          </div>
        </transition>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "detail-list",
  props: {
    ajaxData: Object
  },
  data(){
    return{
      index:-1,
    }
  },
  methods:{
    changeCollapse(key){
      this.index = this.index ===key?-1:key
    },
  }
}
</script>

<style lang="scss" scoped>
@import "~css/varibles.scss";
$ul-size:.3rem;
.detail-list{
  h3{
    font-weight: bold;
    margin: .16rem 0;
    padding-left: .46rem;
    background-image: url("/img/icons/android-chrome-192x192.png");
    font-size: $font-size;
    background-size: $font-size;
    background-repeat: no-repeat;
  }
  >ul{
    >li{

      border-bottom: 1px solid #f1f1f1;
      >p{
        padding: .2rem .24rem;
        background-color: #fff;
        font-size: $ul-size;
        >span:first-child{
          display: inline-block;
          width: 1.6rem;
        }
        >.price{
          margin-left: 2.6rem;
          font-size: .26rem;
          color: #ff6666;
          b{
            font-size: $ul-size;
            font-weight: bold;
          }
          >span{
            color:#a1a1a1;
          }
        }
        >i{
          position: absolute;
          color:#c3c3c3;
          right:.36rem;
        }
      }
      .collapse{
        >ul{
          float:left;
          padding: .2rem .14rem;
          li{
            height:.32rem;
          }
          &:last-child{
            float:right;
            text-align: center;
            margin-right: .3rem;
          }
        }
        ul:first-child{
          li{
            padding-bottom: .12rem;
          }
        }
      }
    }
  }
}
.collapse{
  overflow: hidden;
  height:1.5rem;
}
.v-enter,.v-leave-to{
  height:0;
}
.v-enter-active,.v-leave-active{
  transition:height 800ms;
}
</style>
